<template>
  <transition name="ci">
    <div v-bind:class="['am-modal','am-modal-confirm']">
      <div v-bind:class="'am-modal-dialog'">
        <div v-bind:class="'am-modal-hd'" v-if="title">{{title}}</div>
        <div v-bind:class="'am-modal-bd'"><slot>{{content}}</slot></div>
        <div v-bind:class="'am-modal-footer'">
          <span v-bind:class="'am-modal-btn'"
            v-on:click="cancel">{{cancelText}}</span>
          <span v-bind:class="'am-modal-btn'"
            v-on:click="ok">{{okText}}</span>
        </div>
      </div>

      <div v-bind:class="'am-dimmer'"></div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'am-confirm',

  props: {
    size: String,     // lg
    title: String,
    content: {
      type: String,
      default: 'Are you kidding?'
    },

    okText: {
      type: String,
      default: '确认'
    },

    cancelText: {
      type: String,
      default: '取消'
    }
  },

  methods: {
    cancel () {
      this.$emit('cancel')
    },

    ok () {
      this.$emit('ok')
    }
  }
}
</script>
